<template>
  <div id="app">
    <!-- <mt-header fixed title='标题过长会隐藏后面的内容啊哈哈哈哈'>
      <mt-button slot='right' icon='more'/>
    </mt-header>

    <main class="main">
      <mt-cell v-for='num of 3'>{{num}}</mt-cell>
      <br>
      <br>
      <br>
      <br>
      <br>
      <ul class="share-list">
        <li v-for='num of 3' class="share-item"/>
      </ul>
      <br>
      <br>
      <br>
      <br>
      <br>
      <ul class="list">
        <li v-for='num of 3' class="list-item">{{num}}</li>
      </ul>
      <br>
      <br>
      <br>
      <div class="test" src="sinaweibo://qrcode">weibo</div>
    </main> -->
  </div>
</template>

<!-- <style lang='scss'>
  $color: #cc2121;
  html,
  body,
  #app {
    height: 100%;
    overflow: hidden;
  }
  .mint-header {
    height: $header-height!important;
  }
  .main {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    height: calc(100% - #{$header-height});
    margin-top: $header-height;

    .share-list {
      display: flex;
      justify-content: space-between;
    }
    .share-list:before,
    .share-list:after {
      content: "";
    }
    .share-item {
      width: 60px;
      height: 60px;
      background: #f00;
    }
    .list {
      display: flex;
      .list-item {
        flex: 1;
        color: #f00;
        text-align: center;

        @for $i from 1 through 5 {
          &:nth-child(#{$i}) {
            background: #222 * $i;
          }
        }
      }
    }
  }
  .test {
    font-size: 20px;
    line-height: 30px;
    background-image: linear-gradient(0, $color, $color 50%, transparent 50%);
    background-size: 100% 1px;
    background-position: top left;
    background-repeat: no-repeat;
  }
</style> -->
